<!-- 查看明细 弹出 -->
<template>
  <div class>
    <el-drawer
      ref="drawer"
      title="明细数据"
      size="80%"
      :visible.sync="drawer"
      :append-to-body="true"
      :destroy-on-close="true"
      direction="btt"
      custom-class="drawer-table"
      @close="close"
    >
      <div slot="title" style="display: flex;justify-content: space-between;">
        <span>{{ detailTitle }}</span>
        <el-button
          type="primary"
          icon="el-icon-folder-add"
          class="btn gray-btn search-export-btn"
          @click="exportExcel"
          >导出</el-button
        >
      </div>
      <!-- 明细查询暂时注释掉 -->
      <!-- <div>
        <div>
          <span class="detail-title">明细查询:</span>
          <el-button type="text" size="small" @click="isShowQuery">
            {{ showQuery ? "收起" : "展开" }}
            <i v-show="!showQuery" class="el-icon-arrow-down" />
            <i v-show="showQuery" class="el-icon-arrow-up" />
          </el-button>
        </div>
        <div v-if="showQuery" class="common-table-panel contentBox">
          <div class="gradient gradient1" style="padding: 0">
            <div class="search-header">
              <div class="left-search">
                <el-form
                  ref="queryForm"
                  :model="queryForm"
                  :inline="true"
                  class="search-form"
                  label-width="130px"
                >
                  <el-form-item
                    v-for="item in queryList"
                    :key="item.prop"
                    :label="item.label"
                  >
                    <el-date-picker
                      v-if="item.type == 'date'"
                      v-model="queryForm[item.prop]"
                      type="date"
                      value-format="yyyyMMdd"
                      :placeholder="item.label"
                    />
                    <el-date-picker
                      v-else-if="item.type == 'daterange'"
                      v-model="queryForm[item.prop]"
                      type="daterange"
                      value-format="yyyyMMdd"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />
                    <el-select
                      v-else-if="item.type === 'select'"
                      v-model="queryForm[item.prop]"
                      multiple
                      collapse-tags
                      filterable
                      placeholder="请选择"
                      clearable
                      @change="selectChangeQuery($event, item.prop)"
                    >
                      <el-option
                        v-for="j in item.options"
                        :key="j.value"
                        :label="j.label"
                        :value="j.value"
                      >
                        <div class="self-select">
                          <span v-if="j.checked" class="select-checked" />
                          <span v-if="!j.checked" class="select-unchecked" />
                          <span class="select-value">{{ j.label }}</span>
                        </div>
                      </el-option>
                    </el-select>
                    <el-input
                      v-else
                      v-model="queryForm[item.prop]"
                      :placeholder="item.label"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item label="新增条件">
                    <el-select v-model="addselect" style="width: 170px">
                      <el-option
                        v-for="item in querySelectList"
                        :key="item.prop"
                        :value="item.prop"
                        :label="item.label"
                        :disabled="item.disabled"
                      />
                    </el-select>
                    <el-button
                      class="btn search-add-btn"
                      @click="inputSlotHandle"
                      >新增</el-button
                    >
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" class="btn" @click="onReset"
                      >重置</el-button
                    >
                    <el-button type="primary" class="btn" @click="getData(1)"
                      >查询</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div> -->
      <div ref="gradient1" class="gradient gradient1">
        <div class="table-panel">
          <div id="tableBody" ref="tableBody" class="table-body">
            <el-table
              ref="uTable"
              style="width: 100%;"
              :border="false"
              stripe
              :data="tableData"
              :max-height="maxHeight"
              :show-summary="showSummary"
              :summary-method="summaryMethod"
            >
              <el-table-column
                type="index"
                label="序号"
                align="center"
                width="80"
              >
                <template slot-scope="scope">{{
                  scope.$index + (page.page - 1) * page.size + 1
                }}</template>
              </el-table-column>
              <el-table-column
                v-for="(item, index) in infoColumns"
                :key="item.id"
                :prop="item.column"
                :label="
                  item.column == 'commission' && parentTitle == '主承业务概览'
                    ? '净' + item.label
                    : item.label
                "
                align="center"
                :sortable="item.sortable"
                :min-width="item.width"
                show-overflow-tooltip
              >
                <!-- <template slot="header">
                  <span>{{ item.label }}</span></template
                > -->
                <template v-if="item.isfilter" slot="header">
                  <span>{{
                    item.label + (item.specialLabel ? item.specialLabel : "")
                  }}</span>
                  <el-popover
                    @show="headerPopoverShow(item, index)"
                    @hide="headerPopoverHide(item, index)"
                    :ref="'filterPanel' + index"
                    placement="bottom"
                    visible-arrow="false"
                    trigger="click"
                  >
                    <i
                      slot="reference"
                      style="margin-left: 5px;"
                      @click.stop
                      class="el-icon-arrow-down"
                    ></i>
                    <div class="search-input">
                      <input
                        v-model="item.search"
                        @input="headerInput(item, index)"
                        :placeholder="item.label"
                      />
                    </div>
                    <div class="header-table">
                      <el-table
                        :ref="'headerTable' + item.label"
                        @selection-change="headerTableSelection"
                        @row-click="headerTableClick"
                        :data="item.filters"
                        max-height="250"
                        :border="false"
                      >
                        <el-table-column
                          width="30"
                          align="center"
                          type="selection"
                        />
                        <el-table-column
                          align="left"
                          prop="value"
                          :min-width="item.filterWidht"
                          label="全选"
                          header-align="left"
                        ></el-table-column>
                      </el-table>
                      <div class="headerTable-bottom">
                        <el-button
                          type="text"
                          size="small"
                          @click="headerFilter(item, index)"
                          >筛选</el-button
                        >
                        <el-button
                          type="text"
                          size="small"
                          @click="headeronReset(item, index)"
                          >重置</el-button
                        >
                      </div>
                    </div>
                  </el-popover>
                </template>
                <template slot-scope="scope">
                  <div v-if="!scope.row.isInput">
                    <span
                      v-if="!scope.row.isInput"
                      style="display: block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"
                      >{{ scope.row[item.column] }}</span
                    >
                  </div>
                  <div v-if="scope.row.isInput">
                    <span v-if="item.isInput != 0">{{
                      scope.row[item.column]
                    }}</span>
                    <el-input v-else v-model="scope.row[item.column]" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                v-if="operate.show"
                fixed="right"
                label="操作"
                width="140"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button
                    v-for="(btnItem, btnIndex) in operate.btns"
                    :key="'operate' + btnIndex"
                    size="mini"
                    @click="handleOperate(btnItem, scope.row)"
                    type="primary"
                    >{{ btnItem.label }}</el-button
                  >
                </template>
              </el-table-column>
              <!-- <el-table-column
                v-if="showHandle"
                fixed="right"
                label="操作"
                width="140"
                align="center"
              >
                <template slot-scope="scope">
                  <div
                    v-if="!scope.row.isInput"
                    class="fixed-right"
                    @click.stop="editHandle(scope.row, scope.$index)"
                  >
                    <span class="hidden-text">修改</span>
                    <span class="hidden-dividing" />
                  </div>
                  <div
                    v-if="scope.row.isInput"
                    class="fixed-right"
                    @click="saveHandle(scope.row, scope.$index)"
                  >
                    <span class="hidden-text">保存</span>
                    <span class="hidden-dividing" />
                  </div>
                  <div
                    v-if="scope.row.isInput"
                    class="fixed-right"
                    @click="cancelHandle(scope.row, scope.$index)"
                  >
                    <span class="hidden-text">取消</span>
                    <span class="hidden-dividing" />
                  </div>
                </template>
              </el-table-column> -->
            </el-table>
          </div>
          <div
            v-if="showPagination"
            class="pagination"
            style="padding-bottom: 5px;"
          >
            <Pagination
              :total="total"
              :page.sync="page.page"
              :limit.sync="page.size"
              @pagination="getData"
            />
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {
  GetCommissionDataDetailList,
  GetGenofpurchaseDataDetailList,
  GetGenofpaymentDataDetailList,
  GetPositionDataDetailList,
  GetPositionprofitDetailList,
} from "@/api/distribution/dataOverview";
import {
  GetUnderwritingDataDetailList,
  GetSummaryDataDetailList,
  GetFeeincomeDataDetailList,
  GetFeepayDataDetailList,
  GetMainPositionDataDetailList,
  GetMainPositionprofitDataDetailList,
} from "@/api/main/index.js";
import {
  getAnalysisMemberListData,
  getAnalysisUnderwritingbondListData,
  getAnalysisDistributionListData,
  getAnalysisUnderwritingListData,
  getAnalysisSofmListData,
} from "@/api/investor/index.js";
import { saveBranchNm } from "@/api/mainapi/mainapi";
import moment from "moment";
import { setTimeout } from "timers";
export default {
  name: "",
  components: {
    Pagination,
  },
  props: {
    infoColumns: Array,
    infoTableQuery: Array,
    parentTitle: String,
    showHandle: {
      type: Boolean,
      default: false,
    },
    // 默认显示分页
    showPagination: {
      type: Boolean,
      default: true,
    },
    // 操作列
    operate: {
      type: Object,
      default: () => {
        return {
          show: false,
          btns: [],
        };
      },
    },
    infoQuery: {
      type: Object,
      default: () => {},
    },
    summaryMethod: {
      type: Function,
      default: () => {},
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    maxHeightProp: {
      type: Number,
      default: 260,
    },
    detailTitle: {
      type: String,
      default: "明细数据",
    },
  },
  data() {
    return {
      page: {
        size: 50,
        page: 1,
      },
      total: 0,
      tableData: [],
      drawer: false,
      changeValue: null,
      maxHeight: this.maxHeightProp || 260,
      // fullscreenLoading: false,
      // loading: true,
      tableDataCopy: [],
      headerSelection: [],
      queryForm: {},
      showQuery: false,
      addselect: "",
      querySelectList: [],
      queryList: [],
      emitObj: {},
    };
  },
  computed: {},
  watch: {
    tableData: {
      handler: function(newValue, oldValue) {
        // 筛选之后 点击字段查看明细 会触发tableData的监听事件
        // 所以不能在 这里清空 tableDataCopy 和isHeaderSearch
        // 增加page的监听事件 如果更换新的页面 就重新渲染
        // this.isHeaderSearch = false;
        // this.tableDataIndex++;
        this.getFilter(newValue);
      },
      deep: true,
      immediate: true,
    },
    infoQuery: {
      handler: function(newValue, oldValue) {
        this.querySelectList = JSON.parse(JSON.stringify(this.infoTableQuery));
        this.queryList = JSON.parse(JSON.stringify(this.infoTableQuery));
        if (this.parentTitle === "当日持仓分析债券维度明细") {
          this.$set(this.queryForm, "selectTxnDt", [
            moment().format("yyyyMMDD"),
            moment().format("yyyyMMDD"),
          ]);
        } else {
          this.queryForm = {};
        }
        this.getData(1);
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  destroyed() {
    this.tableData = [];
    console.log("关闭");
  },
  methods: {
    // 操作列
    handleOperate(btnItem, row) {
      console.log("操作列", btnItem, row);
      this.$emit(btnItem.fun, row);
    },
    getFilter(newValue) {
      this.infoColumns.forEach((item, index) => {
        if (!item.fixed && !item.isFilterTable) {
          item.id = Math.random();
          item.filters = [];
          const arr = [];
          const num = [];
          if (newValue) {
            newValue.forEach((item1, index1) => {
              item1.id = index1;
              if (item1[item.column]) {
                num.push(item1[item.column].length * 14);
              }
              arr.push(item1[item.column]);
            });
          }

          let filterHeaderData = [];
          if (item.label == "时间") {
            filterHeaderData = Array.from(new Set(arr)).sort(function(a, b) {
              if (new Date(a) && new Date(b)) {
                const x = new Date(a);
                const y = new Date(b);
                return x < y ? -1 : x > y ? 1 : 0;
              } else {
                return;
              }
            });
          } else {
            filterHeaderData = Array.from(new Set(arr)).sort();
          }
          filterHeaderData.forEach((item2) => {
            if (item2) {
              item.filters.push({
                text: item2,
                value: item2,
                id: item.label,
                // width: item2.length * 14
              });
            }
          });
          item.filterWidht = Math.max(...num);
        }
        // console.log("item.filters", item.filters);
      });
    },
    // 查询条件展示时表格高度改变
    isShowQuery() {
      this.showQuery = !this.showQuery;
      if (this.showQuery) {
        this.maxHeight = this.$refs.drawer.$el.clientHeight * 0.8 - 360;
      } else {
        this.maxHeight = this.$refs.drawer.$el.clientHeight * 0.8 - 180;
      }
    },
    getData(page) {
      if (page == 1) this.page.page = 1;
      const funObj = {
        分销销售佣金分析: GetCommissionDataDetailList,
        代申购业务: GetGenofpurchaseDataDetailList,
        代缴款业务: GetGenofpaymentDataDetailList,
        FI持仓监控1: GetPositionDataDetailList,
        FI持仓利润1: GetPositionprofitDetailList,
        发行数据分析: GetUnderwritingDataDetailList,
        主承业务概览: GetSummaryDataDetailList,
        手续费收入: GetFeeincomeDataDetailList,
        手续费支出: GetFeepayDataDetailList,
        FI持仓监控2: GetMainPositionDataDetailList,
        FI持仓利润2: GetMainPositionprofitDataDetailList,
        团员投资人: getAnalysisMemberListData,
        主承债直接投资人: getAnalysisUnderwritingbondListData,
        分销债投资人: getAnalysisDistributionListData,
        债券承销专户投资人: getAnalysisUnderwritingListData,
        "自营/理财投资人": getAnalysisSofmListData,
      };

      // 详情表格里面的查询条件
      const obj = {};
      const arr = this.querySelectList.map((item) => item.prop);
      arr.forEach((item) => {
        obj[item] = "";
      });
      for (const key in this.queryForm) {
        console.log(key);
        arr.forEach((item) => {
          if (key.includes(item)) {
            if (this.queryForm[key] && !Array.isArray(this.queryForm[key])) {
              obj[item] += this.queryForm[key] + ",";
            } else if (
              this.queryForm[key] &&
              Array.isArray(this.queryForm[key])
            ) {
              obj[item] = this.queryForm[key].join(",");
            }
          }
        });
      }
      this.emitObj = obj;
      // emit
      if (
        this.parentTitle == "当日持仓分析债券维度明细" ||
        this.parentTitle == "当日持仓分析交易维度明细" ||
        this.parentTitle == "专户处置及利润分析债券维度明细" ||
        this.parentTitle == "专户处置及利润分析交易维度明细" ||
        this.parentTitle == "主承债直接投资人" ||
        this.parentTitle == "分销债投资人" ||
        this.parentTitle == "债券承销专户投资人" ||
        this.parentTitle == "自营/理财投资人" ||
        this.parentTitle == "团员投资人" ||
        this.parentTitle == "来款信息" ||
        this.parentTitle == "缴款信息" ||
        this.parentTitle == "发行数据分析"
      ) {
        const _this = this;
        this.$emit("getinfoData", _this);
        return false;
      }
      // 请求接口
      funObj[this.parentTitle]({
        page: this.page.page, // 查询第几页
        pn: this.page.size, // 每页的条数
        ...this.infoQuery,
        ...obj,
      }).then((res) => {
        if (!this.showQuery) {
          this.maxHeight = this.$refs.drawer.$el.clientHeight * 0.8 - 180;
        }
        if (!res.data || !res.data.result) {
          res.data.result = [];
        } else {
          this.total = Number(res.data.totalResults);
          const resultList = res.data.result;
          resultList.forEach((item) => {
            if (item.startDate) {
              item.startDate = moment(item.startDate).format("yyyy-MM-DD");
            }
            if (item.date) {
              item.date = moment(item.date).format("yyyy-MM-DD");
            }
            if (this.parentTitle === "分销销售佣金分析") {
              // 分销金额
              item.distributionAmount = item.distributionAmount
                ? this.saveTwo(Number(item.distributionAmount) / 100000000)
                : 0;
              const yongjin = [
                "receivableAmt", // 总体销售佣金
                "receivedAmt", // 已收销售佣金
                "remainingReceivableAmt", // 应收销售佣金
                "wtbAmt", // 单位中标量的销售佣金
                "amtRatio", // 算数平均销售佣金费率
              ];
              yongjin.forEach((yj) => {
                if (item[yj]) {
                  item[yj] = this.saveTwo(item[yj]);
                }
                // else {
                //   item[yj] = 0;
                // }
              });
            }
            if (this.parentTitle === "代申购业务") {
              // 分销金额
              item.distributionAmount = item.distributionAmount
                ? this.saveTwo(Number(item.distributionAmount) / 100000000)
                : 0;
              // 发行规模
              item.issueAmount = item.issueAmount
                ? this.saveTwo(Number(item.issueAmount) / 100000000)
                : 0;
              const yongjin = [
                "fee", // 销售佣金
                "couponRate", // 发行利率
                "term", // 期限
              ];
              yongjin.forEach((yj) => {
                if (item[yj]) {
                  item[yj] = this.saveTwo(item[yj]);
                }
                // else {
                //   item[yj] = 0;
                // }
              });
            }
            if (this.parentTitle === "代缴款业务") {
              // 分销金额
              item.distributionAmount = item.distributionAmount
                ? this.saveTwo(Number(item.distributionAmount) / 100000000)
                : 0;
              // 发行规模
              item.issueAmount = item.issueAmount
                ? this.saveTwo(Number(item.issueAmount) / 100000000)
                : 0;
              const yongjin = [
                "fee", // 销售佣金
                "couponRate", // 发行利率
                "term", // 期限
              ];
              yongjin.forEach((yj) => {
                if (item[yj]) {
                  item[yj] = this.saveTwo(item[yj]);
                }
                // else {
                //   item[yj] = 0;
                // }
              });
            }
            if (
              this.parentTitle === "FI持仓监控1" ||
              this.parentTitle === "FI持仓监控2"
            ) {
              // 持仓量
              item.position = item.position
                ? this.saveTwo(Number(item.position) / 100000000)
                : 0;
            }
            if (
              this.parentTitle === "FI持仓利润1" ||
              this.parentTitle === "FI持仓监控2"
            ) {
              // 持仓量
              item.position = item.position
                ? this.saveTwo(Number(item.position) / 100000000)
                : 0;
              const yongjin = [
                "profitCum", // 累计持仓利润
              ];
              yongjin.forEach((yj) => {
                if (item[yj]) {
                  item[yj] = this.saveTwo(item[yj]);
                }
                // else {
                //   item[yj] = 0;
                // }
              });
            }
            if (this.parentTitle === "发行数据分析") {
            }
            if (
              this.parentTitle === "主承业务概览" ||
              this.parentTitle === "手续费收入" ||
              this.parentTitle === "手续费支出"
            ) {
              // 发行金额
              item.issueAmt = item.issueAmt
                ? this.saveTwo(Number(item.issueAmt) / 100000000)
                : 0;
              // 承销份额
              item.underwritingAmount = item.underwritingAmount
                ? this.saveTwo(Number(item.underwritingAmount) / 100000000)
                : 0;
              item.isLeader = item.isLeader === "Y" ? "是" : "否"; // 是否牵头
              const yongjin = [
                "couponRate", // 票面
                "amtRatio", // 费率
                "fee", // 承销费
                "underwritingPct", // 主承/联承承销比
              ];
              yongjin.forEach((yj) => {
                if (item[yj]) {
                  item[yj] = this.saveTwo(item[yj]);
                }
                // else {
                //   item[yj] = 0;
                // }
              });
            }
            if (this.parentTitle === "团员投资人") {
              item.issueAmt = item.issueAmt
                ? this.saveTwo(Number(item.issueAmt) / 100000000)
                : 0;
              item.tradeAmt = item.tradeAmt
                ? this.saveTwo(Number(item.tradeAmt) / 100000000)
                : 0;
              const yongjin = [
                "fee", // 票面
              ];
              yongjin.forEach((yj) => {
                if (item[yj]) {
                  item[yj] = this.saveTwo(item[yj]);
                }
                // else {
                //   item[yj] = 0;
                // }
              });
            }
          });
          console.log(this.infoColumns, "this.infoColumns");
          this.tableData = resultList;
          this.getFilter();
          console.log(this.tableData, "this.tableData");
        }
      });
    },
    formatMoney(s, q) {
      var res = s.toString().replace(/\d+/, function(n) {
        // 先提取整数部分
        return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
          return $1 + ",";
        });
      });
      return this.saveTwo(res);
    },
    close() {
      this.tableData = [];
      this.drawer = false;
      setTimeout(() => {
        this.$parent.infoTableShow = false;
      }, 300);
    },

    show() {
      this.drawer = true;
    },
    saveTwo(str) {
      if (str === null || str === undefined || str === "") {
        return "";
      } else {
        const num = str + "";
        return Number(num).toFixed(2);
      }
    },
    editHandle(row, index) {
      this.$set(row, "isInput", 1);
      this.$emit("editHandle", { row: row, index: index });
    },
    cancelHandle(row, index) {
      this.$set(row, "isInput", false);
    },
    saveHandle(row, index) {
      if (this.parentTitle == "同业部交易台账") {
        this.$emit("saveHandle", { row: row, index: index });
        this.$set(row, "isInput", false);
      } else {
        saveBranchNm({
          secId: row.secId,
          branchNm: row.branchNm,
        }).then((res) => {
          if (res.success) {
            this.$set(row, "isInput", false);
            this.getData();
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    headerTableClick(row, column, event) {
      const tableRef = "headerTable" + row.id;
      this.$refs[tableRef][0].toggleRowSelection(row);
    },
    headerTableSelection(selection) {
      if (selection.length == 0) {
        this.removeArr(this.headerSelection);
      } else {
        this.removeArr(this.headerSelection);
        selection.forEach((item, index) => {
          this.headerSelection.splice(index, 1, item);
        });
      }
    },
    headerFilter(item, index) {
      const arr = this.headerSelection.map((item1) => {
        return item1.value;
      });
      this.tableData = this.tableData.filter((row) => {
        if (arr.includes(row[item.column])) {
          return row;
        }
      });
      const popoverRef = "filterPanel" + index;
      if (this.$refs[popoverRef].length != 0) {
        this.$refs[popoverRef].forEach((item) => {
          item.doClose();
        });
      } else {
        this.$refs[popoverRef].doClose();
      }
    },
    headeronReset(item, index) {
      const popoverRef = "filterPanel" + index;
      const tableRef = "headerTable" + item.label;
      // console.log("item", item, index, "refs", this.$refs[tableRef]);
      if (this.$refs[popoverRef].length != 0) {
        this.$refs[tableRef][0].clearSelection();
        this.$refs[popoverRef].forEach((item) => {
          item.doClose();
        });
        this.tableDataCopy = [];
        this.getData(1);
      } else {
        this.$refs[popoverRef].doClose();
      }
    },
    headerInput(item, index) {
      clearTimeout(this.timer);
      const noSet = [];
      const yeseSet = [];
      if (true) {
        this.headerSelection = [];
        this.infoColumns.forEach((tabCol) => {
          if (tabCol.column == item.column) {
            this.tableData.forEach((item1) => {
              noSet.push(item1[tabCol.column]);
            });
            Array.from(new Set(noSet)).forEach((item2) => {
              if (item2) {
                yeseSet.push({
                  text: item2,
                  value: item2,
                });
              }
            });
          }
        });
        // 因为$set不能驱动视图层变化 所以循环使用splice
        yeseSet.forEach((yset, yindex) => {
          item.filters.splice(yindex, 1, yset);
        });
      }
      const arr = [];
      this.timer = setTimeout(() => {
        item.filters.forEach((item1) => {
          const str = item1.value;
          if (str.indexOf(item.search) != -1) {
            arr.push(item1);
          }
        });
        if (item.filters.length != 0) {
          this.removeArr(item.filters);
        }
        arr.forEach((ar, arIndex) => {
          item.filters.splice(arIndex, 1, ar);
        });
      }, 500);
    },
    removeArr(arr) {
      // 因为赋值为空 或 $set设置为空 都不能驱动视图层变化 所以使用splice删除数组
      for (var i = 0; i < arr.length; i++) {
        arr.splice(i, 1);
        if (arr.length != 0) this.removeArr(arr);
      }
    },
    headerPopoverShow(column, i) {
      console.log("筛选弹框打开");
    },
    headerPopoverHide(column, i) {
      console.log("筛选弹框关闭");
      this.infoColumns.forEach((item) => {
        item.search = "";
      });
      this.getFilter();
    },
    headerFilterClick() {
      // this.getData();
      // this.$set(this, "fullscreenLoading", true);
      // this.fullscreenLoading = true;
      // console.log("点击");
      // showLoading();
    },
    exportExcel() {
      const obj = {
        title: this.parentTitle,
        emitObj: this.emitObj,
      };
      this.$emit("exportDetail", obj);
    },
    inputSlotHandle() {
      let newIndex = 0;
      let oldIndex = 0;
      let obj = {};
      this.queryList.forEach((item, index) => {
        if (item.prop.includes(this.addselect)) {
          newIndex++;
          obj = item;
          oldIndex = index;
        }
      });
      this.queryList.splice(oldIndex + 1, 0, {
        label: obj.label,
        prop: obj.prop + newIndex,
        type: obj.type,
      });
    },
    onReset() {
      if (this.parentTitle == "当日持仓分析债券维度明细") {
        this.queryForm = {};
        this.$set(this.queryForm, "selectTxnDt", moment().format("yyyyMMDD"));
      } else {
        this.queryForm = {};
      }

      this.queryList = JSON.parse(JSON.stringify(this.infoTableQuery));
      this.queryList.forEach((item) => {
        if (item.options && item.options.length != 0) {
          item.options.forEach((item1) => {
            item1.checked = false;
          });
        }
      });
      this.getData(1);
    },
    selectChangeQuery(val, prop) {
      let options = [];
      this.queryList.forEach((item) => {
        if (item.prop == prop) {
          options = item.options;
        }
      });
      options.forEach((item) => {
        if (val.includes(item.value)) {
          item.checked = true;
        } else {
          item.checked = false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep.el-table {
  width: auto;
  z-index: 999;
  .el-table__body-wrapper {
    pointer-events: all;
    overflow: auto !important;
  }
}
</style>
